<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/konva.js"></script>
    <script src="js/PiChart.js"></script>
</head>
<body>
<div id="container"></div>
<script>
   //1.创建舞台
    var stage = new Konva.Stage({
        width:window.innerWidth,
        height:window.innerHeight,
        container:"container"
    })
    //2.创建层
    var layer = new Konva.Layer({});
    //添加到舞台
    stage.add(layer);

    //设置数据
    var dateArr = [
        {name:"上海",color:"red",value:0.15},
        {name:"北京",color:"blue",value:0.3},
        {name:"广州",color:"pink",value:0.1},
        {name:"杭州",color:"green",value:0.25},
        {name:"重庆",color:"orange",value:0.2}
        ];

    //实例化PiChart
      //设置常量
    var circleX = stage.width()*0.5,circleY=stage.height()*0.5;
    var outer_r = 180,inner_r = 150;
    var PiChart = new PiChart({
        x:circleX,
        y:circleY,
        outerRadius:outer_r,
        outerColors:"#ccc",
        innerRadius:inner_r,
        outerWidth:8,
        dateArray:dateArr,
    });
    //调用
   PiChart.render(layer);
   //绘制
    layer.draw();
    //动起来
   stage.on("contentClick",function () {
       PiChart.animation();
   });

</script>
</body>
</html>